<template>

   <section>
     <el-card>
     <div style="overflow:auto;">
        <h2 style="margin-bottom:10px;">资产分类树</h2>
        <el-tree
          :data="classifys"
          node-key="id"
          highlight-current
           @node-click="nodeClick" 
          :props="defaultProps"
           v-loading="listLoading" 
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            {{ node.label }}
          </span>
        </el-tree>
      </div> 
     </el-card>
   </section>
</template>

<script>
import store from "@/store";
import { mapActions, mapGetters } from "vuex";

import api from "@/service/api";
import http from "@/service/http";

let id = 1000;
let flag = false;
let targetNode; //当前要操作的node
export default {
  data() {
    return {
      selectNodeClass:false,      
      defaultProps: {
        children: "child",
        label: "name"
      },
      rules: {
        groupName: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  //计算属性
  computed: {
    //导入store的getters属性
    ...mapGetters({
      classifys: "system/assetClassify/classifys",
      listLoading:"system/assetClassify/listLoading"
    }),
  },
  methods: {
    //导入actions方法
    ...mapActions({
      selectItem: "system/assetClassify/selectItem",
      classifyList: "system/assetClassify/classifyList",
      setClassifyId:"system/assetInfo/setClassifyId"
    }),
    nodeClick(data){
      this.setClassifyId(data.id); 
    }
  },
  mounted() {
    this.classifyList();
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node__content {
  height: 36px;
}
</style>
